<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
</head>

<body>
    <div class="icons" style="display: none;">
        <svg t="1732523595035" id="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="9984" width="10" height="10">
            <path
                d="M853.04392354 182.47719778h-30.39515334V144.00320945H547.85129406V177.84064898H512.93667652v222.99926417h-33.83743953v34.91461757h-50.58053245v32.05775413h-51.65771047v36.34304925h-35.61712497v33.48618582h-68.04954968V504.5065878h-34.1886932v-34.18869323h-34.18869325v-69.47798142h-33.83743956v204.47648586h32.78367845v34.91461754h35.61712496v34.56336387h33.83743951v34.18869322h34.18869327v33.13493212h33.8374395v137.85536786h69.47798142v-35.26587121h-34.56336385v-33.83743953h34.18869325v-34.18869324h34.18869323v-33.83743957h34.56336383v33.83743957H512v103.31542091h68.63497251v-34.91461756h-33.13493215v-136.45035307h33.13493215v-34.56336381h35.26587125V622.76199931h33.48618584v-119.66042631h34.91461753v33.13493213h33.13493214v-66.97237166h-67.67487907v-68.75205711h136.07568248v-34.18869324h-101.53573556l-0.35125367-37.51389489h169.09353009v-146.33229044z m-237.56458424 47.4192492h-34.18869322v-34.18869324h34.18869322v34.18869324z"
                p-id="9985" fill="#098711"></path>
        </svg>
        <svg t="1732523635309" id="icon2" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="11208" width="10" height="10">
            <path
                d="M297.690434 540.855673a257.989139 240.372205 0 1 0 515.978279 0 257.989139 240.372205 0 1 0-515.978279 0Z"
                fill="#E89B54" p-id="11209"></path>
            <path
                d="M74.603303 454.466726a257.989139 240.376252 0 1 0 515.978279 0 257.989139 240.376252 0 1 0-515.978279 0Z"
                fill="#E89B54" p-id="11210"></path>
            <path
                d="M204.975903 240.380299a257.989139 240.380299 0 1 0 515.978279 0 257.989139 240.380299 0 1 0-515.978279 0Z"
                fill="#E89B54" p-id="11211"></path>
            <path
                d="M433.401131 357.867a257.989139 240.380299 0 1 0 515.978279 0 257.989139 240.380299 0 1 0-515.978279 0Z"
                fill="#E89B54" p-id="11212"></path>
            <path
                d="M121.970315 424.623566a212.095264 197.618863 0 1 0 424.190529 0 212.095264 197.618863 0 1 0-424.190529 0Z"
                fill="#FFCC66" p-id="11213"></path>
            <path
                d="M177.892851 394.48497a145.083732 135.176483 0 1 0 290.167464 0 145.083732 135.176483 0 1 0-290.167464 0Z"
                fill="#FFE28C" p-id="11214"></path>
            <path
                d="M487.988132 325.587498a212.095264 197.618863 0 1 0 424.190528 0 212.095264 197.618863 0 1 0-424.190528 0Z"
                fill="#FFCC66" p-id="11215"></path>
            <path
                d="M543.910668 295.444855a145.083732 135.176483 0 1 0 290.167464 0 145.083732 135.176483 0 1 0-290.167464 0Z"
                fill="#FFE28C" p-id="11216"></path>
            <path
                d="M248.522472 202.171827a212.095264 197.614816 0 1 0 424.190529 0 212.095264 197.614816 0 1 0-424.190529 0Z"
                fill="#FFCC66" p-id="11217"></path>
            <path
                d="M304.440962 172.029183a145.083732 135.176483 0 1 0 290.167463 0 145.083732 135.176483 0 1 0-290.167463 0Z"
                fill="#FFE28C" p-id="11218"></path>
            <path
                d="M302.826177 470.873584a212.095264 197.618863 0 1 0 424.190529 0 212.095264 197.618863 0 1 0-424.190529 0Z"
                fill="#FFCC66" p-id="11219"></path>
            <path
                d="M358.748714 440.73094a145.083732 135.18053 0 1 0 290.167463 0 145.083732 135.18053 0 1 0-290.167463 0Z"
                fill="#FFE28C" p-id="11220"></path>
            <path
                d="M460.905079 589.206124s41.227593 254.609828-118.182798 434.777688h368.110157c-3.654512-5.054802-321.516137-429.714792 32.251171-682.143245 0 0-187.444507 101.197208-187.444506 174.283406 0 112.47237 54.417023-200.520619-151.166492-290.475041 0 0 145.573428 84.936045 96.745421 326.081242 0 0-24.185344-142.424801-193.490842-142.424801 0-0.004047 153.17789 29.980761 153.177889 179.900751z"
                fill="#D57E58" p-id="11221"></path>
            <path
                d="M501.218032 551.726127c-2.614413 110.999233 35.909731 301.402155 35.909732 301.402154-24.666946-149.74192 24.666946-361.63483 24.666946-361.63483v-0.004047 0.004047c-3.399546-73.794437-32.222842-211.107777-157.318052-265.844519-0.004047-0.004047 145.569381 84.931998 96.741374 326.077195z"
                fill="#BA6E4D" p-id="11222"></path>
            <path
                d="M743.083609 341.83652s-148.952739 80.419505-181.292946 149.652884c-3.399546-73.794437-32.222842-211.107777-157.318052-265.844519 0 0 145.573428 84.936045 96.745421 326.081242 0 0-24.185344-142.424801-193.490842-142.424801 0 0 153.181937 29.984808 153.181937 179.904798 0 0 41.227593 254.609828-118.182799 434.777688 0 0 119.429299-79.241805 160.066018-414.093067l40.584107-16.783237s1.809044 265.229363 167.460032 430.880351c-3.658559-5.058849-321.520184-429.718839 32.247124-682.151339z"
                fill="#BA6E4D" p-id="11223"></path>
            <path
                d="M486.118381 1023.983812c0.250919-0.076894 43.793441-60.762843 48.775395-203.232162 0 0 22.437005 154.825051 46.747809 203.232162h-95.523204z"
                fill="#BA6E4D" p-id="11224"></path>
        </svg>
        <svg t="1732524637255" id="icon3" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="13856" width="10" height="10">
            <path
                d="M952.529455 459.752727a34.909091 34.909091 0 0 0-49.361455 0l-21.085091 21.085091C860.625455 276.317091 687.220364 116.363636 477.090909 116.363636a400.570182 400.570182 0 0 0-48.686545 3.211637c-7.842909 0.930909-15.616 2.164364-23.342546 3.560727-4.701091 0.837818-9.402182 1.582545-14.010182 2.56-9.844364 2.164364-19.572364 4.654545-29.160727 7.540364-6.865455 2.024727-13.521455 4.398545-20.247273 6.749091-3.537455 1.28-7.121455 2.56-10.635636 3.93309-7.237818 2.792727-14.336 5.701818-21.364364 8.890182-1.489455 0.674909-2.978909 1.442909-4.468363 2.141091-15.592727 7.330909-30.650182 15.499636-45.079273 24.645818l-1.931636 1.163637a394.309818 394.309818 0 0 0-26.624 18.734545 411.322182 411.322182 0 0 0-54.551273 49.780364c-2.443636 2.653091-4.887273 5.259636-7.261091 7.982545A375.04 375.04 0 0 0 148.945455 283.461818a407.319273 407.319273 0 0 0-37.771637 62.557091c-1.000727 2.071273-2.141091 4.026182-3.118545 6.097455-0.232727 0.418909-0.279273 0.861091-0.465455 1.28A404.340364 404.340364 0 0 0 69.818182 523.636364C69.818182 748.218182 252.509091 930.909091 477.090909 930.909091c143.476364 0 273.687273-73.309091 348.299636-196.049455a34.909091 34.909091 0 0 0-59.671272-36.258909C703.883636 800.349091 595.991273 861.090909 477.090909 861.090909 291.025455 861.090909 139.636364 709.701818 139.636364 523.636364a335.127273 335.127273 0 0 1 32.907636-144.384A335.755636 335.755636 0 0 1 210.385455 317.672727c4.119273-5.352727 8.378182-10.565818 12.8-15.616l3.397818-3.746909a341.224727 341.224727 0 0 1 48.151272-44.101818l3.258182-2.443636a340.619636 340.619636 0 0 1 58.112-34.327273l1.908364-0.930909a313.320727 313.320727 0 0 1 26.391273-10.565818c5.771636-2.094545 11.52-4.096 17.408-5.841455 7.842909-2.327273 15.802182-4.421818 23.901091-6.167273 3.909818-0.861091 7.912727-1.466182 11.845818-2.187636a371.479273 371.479273 0 0 1 29.416727-4.049455c9.937455-0.930909 19.968-1.536 30.114909-1.536 169.378909 0 309.597091 125.556364 333.474909 288.395637l-14.801454-14.824727a34.909091 34.909091 0 1 0-49.361455 49.338181l78.382546 78.429091a34.932364 34.932364 0 0 0 49.338181 0l78.405819-78.429091a34.909091 34.909091 0 0 0 0-49.338181"
                fill="#797979" p-id="13857"></path>
        </svg>
    </div>
    <canvas id="myCanvas" width="200" height="50" style="border:1px solid #d3d3d3;">
        Your browser does not support the HTML5 canvas tag.
    </canvas>

    <script>
        const width = 200;
        const height = 50;
        var c = document.getElementById("myCanvas");
        var ctx = c.getContext("2d");
        const base64 = 'data:image/svg+xml;base64,' + btoa(icon.outerHTML);
        const base642 = 'data:image/svg+xml;base64,' + btoa(icon2.outerHTML);
        const base643 = 'data:image/svg+xml;base64,' + btoa(icon3.outerHTML);

        // 创建一个新的Image对象
        const img = new Image();
        const img2 = new Image();
        const img3 = new Image();
        img.src = base64;
        img2.src = base642;
        img3.src = base643;

        function isRectIntersect(rect1, rect2) {
            return (
                rect1.x <= rect2.x + rect2.width &&
                rect1.x + rect1.width >= rect2.x &&
                rect1.y <= rect2.y + rect2.height + 5 &&
                rect1.y + rect1.height >= rect2.y + 5
            );
        }

        let role = {
            x: 20,
            y: 0,
            size: 10,
            // speed: 5,
            addSpeed: {
            },
            color: "green"
        }
        let obstacles = [];
        class Obstacle {
            constructor(x, y) {
                this.x = x;
                this.y = y;
                this.color = "#000000";
                this.size = 5;
                this.height = Math.floor(Math.random() * 5) + 5;
            }
        }

        const drawRole = ({ x, y, size, color }) => {
            ctx.fillStyle = color;
            // ctx.fillRect(x, height - size - y, size, size);
            ctx.drawImage(img, x, height - size - y, size, size);
        }

        const drawObstacle = () => {
            for (let i = 0, len = obstacles.length; i < len; i++) {
                const obstacle = obstacles[i];
                ctx.fillStyle = obstacle.color;
                // ctx.fillRect(obstacle.x - obstacle.size, height - obstacle.height - obstacle.y, obstacle.size, obstacle.height);
                ctx.drawImage(img2, obstacle.x - obstacle.size, height - obstacle.height - obstacle.y, obstacle.size, obstacle.height);
            }
        }

        const runRoleAction = (role, delta) => {
            // role.x += 1;
            for (const key in role.addSpeed) {
                // console.log("@v", role[key], role.addSpeed[key]);
                if (role[key] >= role.addSpeed[key]) {
                    delete role.addSpeed[key];
                } else {
                    role[key] += 8;
                }
            }
            if (role.y > 0) {
                const v = delta * 0.1;
                // const v = 1;
                // console.log("@v", v);
                role.y = role.y - v < 0 ? 0 : role.y - v;
            }
            drawRole(role);
        }


        let requestID, stop = false, score = 0, difficulty = 1;
        let sum = 0, interval = Math.max(Math.floor(Math.random() * 1000 - difficulty), 0) + 500;
        const runObstacleAction = (delta) => {
            if ((sum += delta) > interval) {
                sum = 0;
                obstacles.push(new Obstacle(width, 0));
            }

            let delCount = 0;
            for (let i = 0, len = obstacles.length; i < len; i++) {
                const index = i - delCount;
                const obstacle = obstacles[index];
                obstacle.x -= 2 + score * 0.1;
                if (obstacle.x < 0) {
                    obstacles.splice(index, 1);
                    delCount++;
                    score++;
                    difficulty += 10;
                }
            }
            drawObstacle();
        }

        const runCheck = () => {
            let result = false;
            for (let i = 0, len = obstacles.length; i < len; i++) {
                const obstacle = obstacles[i];
                result = isRectIntersect(
                    { x: obstacle.x, y: obstacle.y, width: obstacle.size, height: obstacle.height },
                    { x: role.x, y: role.y, width: role.size, height: role.size }
                );
                if (result) break;
            }
            if (result) {
                stop = true;
                console.log("游戏结束!");
            }
        }

        const drawGamePause = () => {
            ctx.beginPath();
            ctx.strokeStyle = "#515151";
            const rectWidth = width * 0.8;
            const rectHeight = height * 0.5;
            ctx.strokeRect(width / 2 - rectWidth / 2, rectHeight / 2, rectWidth, rectHeight);

            ctx.beginPath();
            ctx.textAlign = "center";
            ctx.textBaseline = "bottom";
            ctx.font = "10px Arial";
            ctx.fillStyle = "#515151";
            ctx.fillText("Game Over", width / 2, height / 2);


            ctx.beginPath();
            ctx.drawImage(img3, width / 2, height / 2);
        }

        const runGamePause = () => {
            if (stop) {
                drawGamePause();
            }
        }

        const runGameScore = () => {
            ctx.beginPath();
            ctx.textAlign = "left";
            ctx.textBaseline = "top";
            ctx.font = "10px Arial";
            ctx.fillStyle = "#515151";
            ctx.fillText("Score : " + score, 0, 0);
        }


        const play = function (delta) {
            ctx.clearRect(0, 0, width, height);
            runObstacleAction(delta);
            runRoleAction(role, delta);
            runCheck();
            runGamePause();
            runGameScore();


            // const base64 = c.toDataURL();
            // console.clear();
            // console.log('%c ', `background: url("${base64}") 100% / contain no-repeat;`);
            // console.log(role);

            // const base64 = document.getElementById("myCanvas").toDataURL();
            // console.log('%c ', `padding:50px 250px 0;background: url("${base64}") left top/contain no-repeat;`);
        }




        // 键盘事件
        window.addEventListener("keydown", function (event) {
            event.preventDefault();
            if (event.code === "Space" && role.y === 0) {
                // console.log("@Space + 1")
                role.addSpeed.y = 30;
                // role.y = 30;
            }
        });


        c.addEventListener("click", function (event) {
            const x = event.clientX - c.offsetLeft;
            const y = event.clientY - c.offsetTop;
            const iconSize = 10;
            // console.log(stop, x > width / 2, x < width / 2 + iconSize, y > height / 2, y < height / 2 + iconSize);
            if (stop && x > width / 2 && x < width / 2 + iconSize && y > height / 2 && y < height / 2 + iconSize) {
                resetGame();
            }
        });

        const resetGame = () => {
            role = {
                x: 20,
                y: 0,
                size: 10,
                // speed: 5,
                addSpeed: {
                },
                color: "green"
            }
            obstacles = [];
            stop = false;
            score = 0;
            requestID = render();
        }


        let lastTime = Date.now();
        function render() {
            const diff = Date.now() - lastTime;
            if (diff > 16) {
                play(diff);
                lastTime = Date.now();
            }
            if (!stop) {
                requestID = window.requestAnimationFrame(render);
            } else {
                window.cancelAnimationFrame(requestID);
            }
        }
        requestID = render();

    </script>
</body>

</html>